<div class="box-login login">
  <div class="login__wrap">
    <ng-container>
      <h2 class="login__title" jhiTranslate="password.title" [translateValues]="{ username: account.login }" *ngIf="account">
        Password for [<b>{{ account.login }}</b
        >]
      </h2>
      <div class="mt-md">
        <!--                <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>-->
        <!--                <div class="alert alert-success" *ngIf="success" jhiTranslate="password.messages.success">-->
        <!--                    <strong>Password changed!</strong>-->
        <!--                </div>-->
        <!--                <div class="alert alert-danger" *ngIf="error"  jhiTranslate="password.messages.error">-->
        <!--                    <strong>An error has occurred!</strong> The password could not be changed.-->
        <!--                </div>-->

        <div class="alert alert-danger" *ngIf="doNotMatch" jhiTranslate="global.messages.error.dontmatch">
          The password and its confirmation do not match!
        </div>
        <form nz-form #passwordForm="ngForm" nzLayout="vertical" (ngSubmit)="changePassword()" role="form">
          <div class="mt-md">
            <label class="form-control-label" for="currentPassword" jhiTranslate="global.form.currentpassword.label"
              >Current password</label
            >
            <input
              nz-input
              type="password"
              class="form-control"
              id="currentPassword"
              name="currentPassword"
              #currentPasswordInput="ngModel"
              placeholder="{{ 'global.form.currentpassword.placeholder' | translate }}"
              [(ngModel)]="currentPassword"
              required
            />
            <div *ngIf="currentPasswordInput.dirty && currentPasswordInput.invalid">
              <small
                class="form-text text-danger"
                *ngIf="currentPasswordInput.errors.required"
                jhiTranslate="global.messages.validate.newpassword.required"
              >
                Your password is required.
              </small>
            </div>
          </div>
          <div class="mt-md">
            <label class="form-control-label" for="newPassword" jhiTranslate="global.form.newpassword.label">New password</label>
            <input
              nz-input
              type="password"
              class="form-control"
              id="newPassword"
              name="newPassword"
              #newPasswordInput="ngModel"
              placeholder="{{ 'global.form.newpassword.placeholder' | translate }}"
              [(ngModel)]="newPassword"
              minlength="4"
              maxlength="50"
              required
            />
            <div *ngIf="newPasswordInput.dirty && newPasswordInput.invalid">
              <small
                class="form-text text-danger"
                *ngIf="newPasswordInput.errors.required"
                jhiTranslate="global.messages.validate.newpassword.required"
              >
                Your password is required.
              </small>
              <small
                class="form-text text-danger"
                *ngIf="newPasswordInput.errors.minlength"
                jhiTranslate="global.messages.validate.newpassword.minlength"
              >
                Your password is required to be at least 4 characters.
              </small>
              <small
                class="form-text text-danger"
                *ngIf="newPasswordInput.errors.maxlength"
                jhiTranslate="global.messages.validate.newpassword.maxlength"
              >
                Your password cannot be longer than 50 characters.
              </small>
            </div>
            <jhi-password-strength-bar [passwordToCheck]="newPassword"></jhi-password-strength-bar>
          </div>
          <div class="mt-md">
            <label class="form-control-label" for="confirmPassword" jhiTranslate="global.form.confirmpassword.label"
              >New password confirmation</label
            >
            <input
              nz-input
              type="password"
              class="form-control"
              id="confirmPassword"
              name="confirmPassword"
              #confirmPasswordInput="ngModel"
              placeholder="{{ 'global.form.confirmpassword.placeholder' | translate }}"
              [(ngModel)]="confirmPassword"
              minlength="4"
              maxlength="50"
              required
            />
            <div *ngIf="confirmPasswordInput.dirty && confirmPasswordInput.invalid">
              <small
                class="form-text text-danger"
                *ngIf="confirmPasswordInput.errors.required"
                jhiTranslate="global.messages.validate.confirmpassword.required"
              >
                Your confirmation password is required.
              </small>
              <small
                class="form-text text-danger"
                *ngIf="confirmPasswordInput.errors.minlength"
                jhiTranslate="global.messages.validate.confirmpassword.minlength"
              >
                Your confirmation password is required to be at least 4 characters.
              </small>
              <small
                class="form-text text-danger"
                *ngIf="confirmPasswordInput.errors.maxlength"
                jhiTranslate="global.messages.validate.confirmpassword.maxlength"
              >
                Your confirmation password cannot be longer than 50 characters.
              </small>
            </div>
          </div>
          <nz-divider></nz-divider>
          <div nz-row nzType="flex" nzJustify="end">
            <button nz-button nzType="primary" type="submit" [disabled]="passwordForm.form.invalid" jhiTranslate="password.form.button">
              Save
            </button>
          </div>
        </form>
      </div>
    </ng-container>
  </div>
</div>
